<template>
  <!-- 首页导航条 -->
  <div class="row">
    <div class="col nav-bg">
      <div class="header">
        <router-link :to="{name: 'login'}">
          <div class="logo"></div>
        </router-link>
        <ul class="bigl">
          <li class="hove" :class="$route.name == 'login'?'first':''">
            <a href="/" target="view_window">首页</a>
          </li>
          <li class="hove" :class="$route.name == 'CurriculumStructure'?'first':''">
            <router-link :to="{name: 'CurriculumStructure'}">课程体系</router-link>
          </li>
          <li class="hove" :class="$route.name == 'Understand'?'first':''">
            <router-link :to="{name: 'Understand'}">了解我们</router-link>
          </li>
          <li class="hove" :class="$route.name == 'Campus'?'first':''">
            <router-link :to="{name: 'Campus'}">课程服务</router-link>
          </li>
          <li class="hove" :class="$route.name == 'appointment'?'first':''" >
            <router-link :to="{name: 'appointment'}">预约试听</router-link>
            <!-- 预约试听 -->
          </li>
          <li class="up">
            <div @click="dialogVisible = true" class="button-bg">
              <span class="log">登录</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :center="center"
      custom-class="logindialog"
      width="400px"
      id="logindialog"
    >
      <div class="titles" slot="title">哈工科教云课堂</div>
      <el-form>
        <el-input @keyup.13="submitForm()" placeholder="账号/手机号" v-model="ruleForm2.loginID">
          <template slot="prepend">
            <i class="icon iconfont icon-yonghu"></i>
          </template>
        </el-input>
        <el-input
          @keyup.13="submitForm()"
          class="masg40"
          placeholder="密码"
          type="password"
          v-model="ruleForm2.password"
        >
          <template slot="prepend">
            <i class="icon iconfont icon-suo"></i>
          </template>
        </el-input>
        <div class="form-group masg40">
          <el-button
            class="btn-block hei46"
            style="font-size: 20px;background:#2f81f1;color:#ffffff;"
            @click="submitForm()"
          >登 &nbsp; &nbsp; 录</el-button>
        </div>
        <div class="container-fluid">
          <div class="row">
            <div class="col text-left">
              <div class="row">
                <div class="col-3">
                  <a class="sp-an" href="/wechat/pc/login">
                    <i style="color:#8AE04B;" class="icon iconfont icon-weixin-"></i>
                  </a>
                </div>
                <div class="col-9">
                  <a class="sp-an" href="/wechat/pc/login" style="display: inline-block;">微信登陆</a>
                </div>
              </div>
            </div>
            <resetpassword></resetpassword>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import resetpassword from "./resetpassword.vue";

import { mapActions } from "vuex";
export default {
  name: "htedialog",
  props: ["first"],
  data() {
    return {
      ruleForm2: {
        loginID: "",
        password: ""
      },
      center: true,
      dialogVisible: false,
      dialogFormVisible: true
    };
  },

  components: {
    resetpassword
  },
  methods: {
    open() {
      this.$message("暂未开放，敬请期待");
    },
    async submitForm() {
      try {
        let i = await this.login(this.ruleForm2);
        if (i) {
          window.location.href="home.html/#/myclass"
        } else {
          this.error = 1;
        }
      } catch (err) {
        this.$message.error(`错了哦，${err}`);
      }
    },
    ...mapActions(["login"])
  }
};
</script>
<style scoped>
.button-bg {
  width: 134px;
  height: 33px;
  margin-top: -5px;
  background-color: #2f81f1;
  border-width: 134px;
  border-top-left-radius: 55px;
  border-top-right-radius: 56px;
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  display: block;
  cursor: pointer;
}
#logindialog .logindialog {
  background-color: #ecf9ff;
}
.nav-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1200px;
  height: 118px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 30;
}

.titles {
  text-align: left;
  font-size: 24px;
  font-family: MicrosoftYaHei;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #666666;
}
.masg40 {
  margin-top: 40px;
}
.hei46 {
  height: 46px;
  line-height: 20px;
}
.sp-an {
  display: inline-block;
  font-family: AdobeHeitiStd-Regular;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 27px;
  letter-spacing: 3px;
  color: #7d7e7e;
  line-height: 26px;
}
.icon-weixin- {
  font-size: 26px;
}

.bigl {
  float: right;
  margin-top: 53px;
}

.bigl li {
  float: left;
  height: 66px;
  margin-right: 48px;
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #ffffff;
}

.log {
  margin-left: 53px;
  line-height: 33px;
  color: #ffffff;
}

.logo {
  position: absolute;
  margin-top: 43px;
  width: 101px;
  height: 35px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/logo.png");
  cursor: pointer;
}

.header {
  width: 1200px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}

.first {
  border-bottom: 3px solid #2f81f1;
}

.hove:hover {
  border-bottom: 3px solid #2f81f1;
}
.hove a:hover {
  color: #eeeeee;
}
.form-group {
  margin-bottom: 24px;
}
.el-dialog--center.el-dialog__body {
  padding: 25px 25px 20px;
}
</style>

